<template>
	<view class="flex flex-direction bg-white" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text style="font-size: 32rpx; color: #333333">{{typeName}}</text>
			</block>
			<block slot="right">
				<text style="font-size: 32rpx; color: #007AFF;" @click="submit">提交</text>
			</block>
		</cu-custom>
		<view style="margin-top: 20rpx; padding-left: 32rpx; padding-right: 32rpx;">
			<view v-if="type=='username'" class="flex justify-between align-center" style="height: 80rpx; background-color: #F2F2F7; padding: 16rpx 32rpx; border-radius: 4px;">
				<input placeholder="输入新的用户名" v-model="user[type]" :maxlength="maxUsernameLength" style="font-size: 32rpx; color: #333333;"></input>
				<text v-if="user[type].length>0" @click="user[type]=''" class='cuIcon-roundclosefill' style="font-size: 32rpx;"></text>
			</view>
			<view v-if="type=='description'" style="height: 180rpx; background-color: #F2F2F7; padding: 16rpx 32rpx; border-radius: 4px;">
				<textarea placeholder="这个人很懒，什么都没留下" v-model="user[type]" :maxlength="maxDescriptionLength"  style="font-size: 32rpx; color: #333333; line-height: 48rpx;"/>
			</view>
			<view style="font-size: 32rpx; color: #333333; margin-top: 16rpx;">
				{{user[type].length}}/{{maxLength}}
			</view>
		</view>
	</view>
</template>

<script>
	import mineApi from '../../api/mineApi.js'
	export default {
		data() {
			return {
				type: '',
				user: {},
				typeName: '',
				maxLength: '',
				maxUsernameLength: 8,
				maxDescriptionLength: 50
			}
		},
		created() {
			this.type = this.$Route.query.type;
			if(this.type == "username") {
				this.typeName = "用户名";
				this.maxLength = this.maxUsernameLength;
			}else {
				this.typeName = "简介";
				this.maxLength = this.maxDescriptionLength;
			}
			this.user = this.$Route.query.user;
			// console.log(this.user)
		},
		methods: {
			submit() {
				let that = this;
				mineApi.updateMember(this.user).then(res=>{
					this.$tip.success('修改成功!')
					if(this.type == "username") {
						this.$store.commit("SET_USERNAME", this.user.username);
					}
					this.$Router.back(1)
				}).catch(err => {
					console.log(err)
				});
			}
		}
	}
</script>

<style>
</style>
